window.onload = function () {
  var previewImg = this.document.querySelector('.preview_img');
  var mask = this.document.querySelector('#mask');
  var big = this.document.querySelector('#big');
  var bigImg = this.document.querySelector('#big_img');
  previewImg.addEventListener('mouseover', function (e) {
    mask.style.display = 'block';
    big.style.display = 'block';
  });
  previewImg.addEventListener('mouseout', function () {
    mask.style.display = 'none';
    big.style.display = 'none';
  });
  previewImg.addEventListener('mousemove', function (e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    var mx = x - mask.offsetWidth / 2;
    var my = y - mask.offsetHeight / 2;
    var MaxWidth = this.offsetWidth - mask.offsetWidth;
    var MaxHeight = this.offsetHeight - mask.offsetHeight;
    if(mx < 0)mx = 0;
    else if(mx > MaxWidth) {
      mx = MaxWidth
    }
    if(my < 0)my = 0;
    else if(my > MaxHeight) {
      my = MaxHeight;
    }
    mask.style.left = mx + 'px';
    mask.style.top = my + 'px';
    var MaxWidth2 = big.offsetWidth - bigImg.offsetWidth;
    var MaxHeight2 = big.offsetHeight - bigImg.offsetHeight;
    var bx = mx * MaxWidth2 / MaxWidth;
    var by = my * MaxHeight2 / MaxHeight;
    bigImg.style.left = bx + 'px';
    bigImg.style.top = by + 'px';
  })
}

$(function () {
  $('.detail_tab_list li').click(function () {
    $(this).addClass('current').siblings().removeClass('current');
    var index = $(this).index();
    $('.detail_tab_con .item').eq(index).show().siblings().hide();
  });
})